{% extends "WebMainSiteBundle:User:layout.html.twig" %}
{% set title = "试卷基本信息" %}
{% block title %}
    {{ title }}
{% endblock %}

{% block user_main %}

    <form method="post" action="" target="mainframe">

            {#{{ dump(Attach) }}#}
            <input type="hidden" name="id" value="{{ Exam.id }}" />
            {#题型及题目安排#}
            <div id="examQuestion_main">
                {#工具栏#}

                <div class="target">当前编辑内容：《{{ Exam.title }}》<span class="question"></span></div>
                {#内容栏#}
                <div class="main">
                    {#题目安排区 left#}
                    <div class="right">
                        {#指示头#}
                        <div class="header">
                            题目列表
                        </div>
                    </div>
                    <div class="left">
                        <ul>
                            <li>
                                <a>第一题：单选题，共20题，每题1分，共20分</a>
                                <ul>
                                    <li><a>1.钢铁是怎样炼成的是谁写的？</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    {#内容编辑区 right#}
                    <div class="right">
                        {#指示头#}
                        <div class="header">
                            综合编辑
                        </div>
                        {#工作区域#}
                        <div class="tool">
                            <input name="btnReturn" type="button" value="向题目列表增加一个分组" class="btn green" onclick="showExamQuestionGroupEditor()">
                            <input name="btnReturn" type="button" value="向分组添加考试题目" class="btn green" onclick="showExamQuestionSelector()">
                            <input type="hidden" id="examId" value="{{ Exam.id }}">
                            <input type="hidden" id="groupId" value="0">
                        </div>
                        <div class="work form-horizontal">
                            <div class="group row" style="display: none;">
                                <div class="form-group">
                                    <div class="col-md-3 text-right">
                                        <label class="control-label" for="title">
                                            题目要求:
                                        </label>
                                    </div>
                                    <div class="col-md-8">
                                        <input name="GroupTitle" type="text" id="GroupTitle" class="form-control input-lg" datatype="*">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-3 text-right"><label class="control-label" for="info">要求说明:</label></div>
                                    <div class="col-md-8">
                                        <textarea  name="intro" class="form-control" rows="11" id="info"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-3 text-right"><label class="control-label" for="info">&nbsp;</label></div>
                                    <div class="col-md-8">
                                        <p class="buttons-margin-horizontal">
                                            <input type="button" class="btn btn-theme btn-green" value="添加" onclick="addExamQuestionGroup()" />
                                        </p>
                                    </div>
                                </div>

                                {#<dl>#}
                                    {#<dt>题目要求</dt>#}
                                    {#<dd>#}
                                        {#<input name="GroupTitle" type="text" id="GroupTitle" class="input normal long" datatype="*">#}
                                    {#</dd>#}
                                {#</dl>#}
                                {#<dl>#}
                                    {#<dt>#}
                                        {#要求说明#}
                                    {#</dt>#}
                                    {#<dd>#}
                                        {#<textarea datatype="*" name="GroupIntro" id="GroupIntro" class="editor"></textarea>#}
                                    {#</dd>#}
                                {#</dl>#}
                                {#<dl>#}
                                    {#<dt>#}

                                    {#</dt>#}
                                    {#<dd>#}
                                        {#<input type="button" value="添加" id="btnSubmit" class="btn" onclick="addExamQuestionGroup()" />#}
                                    {#</dd>#}
                                {#</dl>#}
                            </div>
                            <div class="question">
                                <div class="form-group">
                                    <div class="col-md-2 text-right">
                                        <label class="control-label" for="title">
                                            题目筛选:
                                        </label>
                                    </div>
                                    <div class="col-md-6">
                                        <select id="ChoiceType" name="type" class="form-control">
                                            <option value="0">单选</option>
                                            <option value="1">多选</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <input name="btnReturn" type="button" value="点击获取列表数据" class="btn green" onclick="showExamQuestionSelector()">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-2 text-right">
                                        <label class="control-label" for="title">
                                            题目分组:
                                        </label>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="subTarget"><span style="color: red">请先选择分组再做操作</span></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-2 text-right">
                                        <label class="control-label" for="title">
                                            题目分值:
                                        </label>
                                    </div>
                                    <div class="col-md-4">
                                        <input name="Score" type="text" id="Score" class="form-control" datatype="n" value="1">
                                    </div>
                                    <div class="col-md-6">
                                        分
                                    </div>
                                </div>
                                {#<dl>#}
                                    {#<dt>选项类型</dt>#}
                                    {#<dd>#}
                                        {#<div class="rule-single-select">#}
                                            {#<select id="ChoiceType" name="type"datatype="*">#}
                                                {#<option value="0">单选</option>#}
                                                {#<option value="1">多选</option>#}
                                            {#</select>#}
                                        {#</div>#}
                                    {#</dd>#}
                                {#</dl>#}
                                {#<dl>#}
                                    {#<dt>获取列表数据</dt>#}
                                    {#<dd>#}

                                    {#</dd>#}
                                {#</dl>#}
                                {#<dl>#}
                                    {#<dt>选择分组</dt>#}
                                    {#<dd>#}
                                        {#<div class="subTarget">请先选择左侧的大分组再做操作</div>#}
                                    {#</dd>#}
                                {#</dl>#}
                                {#<dl>#}
                                    {#<dt>设置分值</dt>#}
                                    {#<dd>#}
                                        {#<input name="Score" type="text" id="Score" class="input normal" datatype="n" value="1">#}
                                    {#</dd>#}
                                {#</dl>#}
                                <div class="questionList">
                                    <ul>
                                        <li>
                                            <a><span class="icon-btn add"><i></i></span>题目正在加载……</a>
                                            <ul>
                                                <li><a>正在获取选项信息</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {#题型及题目安排#}

    </form>
{% endblock %}


{% block myJs %}
    {#---------------------------------------题目编辑CSS------------------------------------#}
    <style>
        #examQuestion_main{

        }
        #examQuestion_main .tool{
            /*border-bottom: 1px solid #CCC;*/
            padding: 10px 0;
            text-align: center;
        }
        #examQuestion_main .target{
            height: 40px;
            line-height: 40px;
            text-align: left;
            font-size: 14px;
        }
        #examQuestion_main .main{

        }
        #examQuestion_main .main .left{
            /*float: left;*/
            /*width: 35%;*/
            /*height: 447px;*/
            /*overflow-y: scroll;*/
        }

        #examQuestion_main .main .left>ul>li{
            list-style: none;
        }
        #examQuestion_main .main .left>ul>li>aa{
            padding: 5px 13px;
            display: block;
            background: #DDD;
            color: #333;
            font-size: 16px;
            line-height: 27px;
            text-decoration: none;
            cursor: pointer;
            border-bottom: 1px dotted #FFF;
        }
        #examQuestion_main .main .left>ul>li>ul>li{
            border-bottom: 1px solid #777;
            list-style: none;
        }
        #examQuestion_main .main .left>ul>li>ul>li>a{
            padding: 3px 10px;
            display: block;
            background: #EEE;
            color: #333;
            font-size: 14px;
            text-decoration: none;
            cursor: pointer;
        }
        #examQuestion_main .main .right{
            /*float: left;*/
            /*width: 65%;*/
            margin-top: 50px;
        }

        #examQuestion_main .main .right .header{
            padding: 16px 5px;
            display: block;
            background: #333;
            color: #FFF;
            font-size: 18px;
            text-decoration: none;
            cursor: pointer;
        }
        #examQuestion_main .main .right .work{
            background: #EEE;
        }

        .questionList{
            border-top: 1px solid #CCC;
            background: #FFF;
        }

        .questionList ul>li{
            list-style: none;
        }

        .questionList ul>li>a{
            color: #222;
            font-size: 14px;
            text-decoration: none;
            padding: 16px 15px;
            display: block;
            /*background: #EEE;*/
            cursor: pointer;
        }

        .questionList>ul>li>ul>li{
            border-bottom: 1px solid #333;
        }
        .questionList>ul>li>ul>li>a{
            padding: 10px 32px;
            display: block;
            /*background: #EEE;*/
            color: #222;
            font-size: 12px;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    {#---------------------------------------题目编辑CSS------------------------------------#}
    {#---------------------------------------题目编辑Js------------------------------------#}
    <script>
        {#var ExamId = {{ Exam.id }};#}
        //================================================================
        //---------试卷内分组设置相关-------------------------------------
        //显示编辑器
        function showExamQuestionGroupEditor(){
            $(".question").hide();
            $(".group").show();
        }
        //新增分组
        function addExamQuestionGroup(){
            var GroupTitle = $("#GroupTitle").val();
            var GroupIntro = $("#GroupIntro").val();

            $.get(
                    "{{ path("ExamAddQuestionGroup",{id:Exam.id}) }}",
                    {
                        GroupTitle:GroupTitle,
                        GroupIntro:GroupIntro
                    },
                    function (data) {
                        if(data.s == 1) {
                            showExamQuestionList(data.d);
                        }else {
                            alert(data.i);
                        }
                    }
            )
        }
        //---------试卷内分组设置相关-------------------------------------

        //获取试卷内的所有题目及分组安排
        function ExamGetQuestion(){
            $.get(
                    "{{ path("ExamGetQuestion",{id:Exam.id}) }}",
                    function (data) {
//                            console.log(data);
                        if(data.s == 1) {
                            showExamQuestionList(data.d);
                        }else {
                            alert(data.i);
                        }
                    }
            )
        }
        //展示试卷的题目分组及题目
        function showExamQuestionList(groupList){
            var box = $('.left');
            var ul = $("<ul>");
            for(var i in groupList) {
                var li = $("<li>");
                var a = $("<aa>");
                var title = groupList[i]["title"];
                a.text("");

                //
                var span =$("<del>[删除]</del><up>[上移]</up><down>[下移]</down>");
                span.css({float:"right",fontWeight:"bold"});
                a.append(span);
                a.append(title);

                a.attr("data",groupList[i]["id"]);
                a.attr("title",groupList[i]["title"]);
                li.append(a);
                var ul1 = $("<ul>");
                var Question = groupList[i]["questions"];
                for(var m in Question) {
                    var li1 = $("<li>");
                    var a1 = $("<a>");
                    var str = (parseInt(m)+1) + "." + Question[m]["title"];
                    a1.text("");

                    a1.attr("data",Question[m]["id"]);
                    //
                    var span1 =$("<del>[删除]</del><up>[上移]</up><down>[下移]</down>");
                    span1.css({float:"right",fontWeight:"bold"});
                    a1.append(span1);
                    a1.append(str);
                    li1.append(a1);
                    ul1.append(li1);
                }
                ul1.on("click","a", function (e) {
                    var tag = e.target.tagName;
                    var _this = $(this);
                    var id = _this.attr("data");
//                        console.log(tag);
                    switch (tag) {
                        case "A":
                            //展开题目列表
//                                console.log(tag);
                            break;
                        case "UP":
                            //上移一层
                            action_question(id,"up");
                            break;
                        case "DOWN":
                            //下移一层
                            action_question(id,"down");
                            break;
                        case "DEL":
                            //删除
                            action_question(id,"del");
                            break;
                        default :
                            //预留其他按钮接口
                            console.log(tag);
                    }
                });
                li.append(ul1);
                ul.append(li);
            }
            ul.on("click","aa", function (e) {
                var tag = e.target.tagName;
                var _this = $(this);
                var title = _this.attr("title");
                var id = _this.attr("data");

                switch (tag) {
                    case "AA":
                        //展开题目列表
                        $(this).siblings().toggle(50);
                        $("#groupId").val(id);
                        $(".subTarget").text( _this.attr("title"));
                        break;
                    case "UP":
                        //上移一层
                        action(id,"up");
//                            console.log(tag);
                        break;
                    case "DOWN":
                        //下移一层
                        action(id,"down");
                        break;
                    case "DEL":
                        //删除
                        action(id,"del");
                        break;
                    default :
                        //预留其他按钮接口
                        console.log(tag);
                }
            });
            box.html(ul);
        }
        //分组属性编辑
        function action(id,action){
            $.post(
                    "{{ path("ExamGroupEdit",{id:Exam.id}) }}",
                    {
                        id:id,
                        action:action
                    },
                    function (data) {
                        if(data.s == 1) {
                            showExamQuestionList(data.d);
                        }else {
                            alert(data.i);
                        }
                    }
            );
        }
        //分组题目属性编辑
        function action_question (id,action){
            $.post(
                    "{{ path("ExamQuestionEdit",{id:Exam.id}) }}",
                    {
                        id:id,
                        action:action
                    },
                    function (data) {
                        if(data.s == 1) {
                            showExamQuestionList(data.d);
                        }else {
                            alert(data.i);
                        }
                    }
            );
        }

        //================================================================
        //---------试卷题目添加相关---------------------------------------
        //显示题目选择器
        function showExamQuestionSelector(){

            ExamGetQuestion4Choose();
            $(".question").show();
            $(".group").hide();
        }
        //获取相应类目下的试题记录
        function ExamGetQuestion4Choose(){
            var type = $("#ChoiceType").val();
            $.get(
                    "{{ path("ExamGetQuestion4Choose",{id:Exam.id}) }}?type=" + type,
                    function (data) {
                        var questionList = data.d;
                        showQuestionList(questionList);
                    }
            )
        }
        //展示并填充相应数据
        function showQuestionList(questionList){
            var box = $('.questionList');
            var ul = $("<ul>");
            for(var i in questionList) {
                var li = $("<li>");
                var a = $("<a>");
                var title = questionList[i]["title"];
                var questionType = questionList[i]["type"] == 1? " [ 多选 ] " : " [ 单选 ] ";
                a.text( questionType + title);
                a.prepend('<span>←加入分组 </span> ');
                a.attr("data",questionList[i]["id"]);
                li.append(a);
                var ul1 = $("<ul>");
                ul1.hide();
                var Choice = questionList[i]["Choice"];
                for(var m in Choice) {
                    var li1 = $("<li>");
                    var a1 = $("<a>");
                    var str = (parseInt(m)+1) + "." + Choice[m]["Content"];
                    a1.text(str);
                    li1.append(a1);
                    ul1.append(li1);
                }
                li.append(ul1);
                ul.append(li);
            }
            ul.on("click","a", function (e) {
                var tag = e.target.tagName;
                if (tag == "A") {
                    //展开选项
                    $(this).siblings().toggle(200);
                }else{
                    //添加到试卷
                    var questionId = $(this).attr("data");
                    var groupId = $("#groupId").val();
                    var Score = $("#Score").val();
                    if (groupId == 0) {
                        alert("请先选择左侧的分组");
                        return false;
                    }
                    addQuestion2Exam( questionId , groupId  ,Score);
                    console.log( "题目ID：" + questionId + "当前分组：" + groupId );
                    $(this).parent().remove();
                }
            });
            box.html(ul);
        }
        //将选取的id填充到试卷内
        function addQuestion2Exam( questionId , groupId ,Score){
            $.post(
                    "{{ path("ExamAddQuestion",{id:Exam.id}) }}",
                    {
                        questionId:questionId,
                        groupId:groupId,
                        Score:Score
                    },
                    function (data) {
//                            console.log(data);
                        if(data.s == 1) {
                            showExamQuestionList(data.d);
                        }else {
                            alert(data.i);
                        }
                    }
            );
        }
        //---------试卷题目添加相关---------------------------------------

        $(function () {
            ExamGetQuestion4Choose();
            ExamGetQuestion();
        });
    </script>
    {#---------------------------------------题目编辑Js------------------------------------#}

{% endblock %}